<template>
  <div id="bottom-bar">
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" 
        @click="toCart"
        :badge="length" />
      <van-goods-action-icon 
        :color="isStar ? '#ff5000' : '#000000'" 
        :icon="isStar ? 'star' : 'star-o'" 
        :text="isStar ? '已收藏' : '收藏'"
        @click="starClick" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addCart" />
      <van-goods-action-button type="danger" text="立即购买" @click="toCart" />
    </van-goods-action>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      isStar: false
    }
  },
  created() {
    // 每次刷新页面, 从LocalStorage取出购物车信息重新赋值
    console.log("DetailBottomBar组件created...");
    let cartList = JSON.parse(localStorage.getItem("cartList")) || [];
    if(cartList) {
      this.$store.commit('setCartList', cartList);
    }
  },
  computed: {
    ...mapGetters({
      length: 'cartListLength'
    })
  },
  methods: {
    starClick() {
      if(this.isStar) {
        // 提示已取消收藏
        this.$mytoast.show("已取消收藏");
      } else {
        // 提示收藏成功
        this.$mytoast.show("收藏成功");
      }
      this.isStar = !this.isStar;
    },
    addCart() {
      this.$emit('addCart');
    },
    toCart() {
      this.$router.push('/cart');
    }
  }
}
</script>

<style scoped>
.van-goods-action {
  height: 49px;
  box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.2);
}
</style>